<template>
	<div class="sidebar">

		<Menu class="nav" ref='sidebarMenu' @on-select="menuSelect" :accordion="true" width="auto">
			<Submenu v-for='(item, index) in sidebarNav' :name="index" :key="index">
				<template slot="title">
					<Icon :type="item.icon"></Icon>
					{{ item.permission_parent_name }}
				</template>
				<MenuItem v-for='(menuitem, index) in item.permission_child' :name='menuitem.permission_child_url' :key='index'> 
					{{ menuitem.permission_child_name }}
				</MenuItem>
			</Submenu>
		</Menu>

	</div>
</template>

<script>
	export default {
		computed: {
			sidebarNav() {
//				console.log(this.$route)
				let sidebarNav = JSON.parse(localStorage.getItem('sidebarnav'))
				return sidebarNav
			}
		},
		methods:{
			menuSelect(name){
//				console.log(name)
				this.$router.push(name)
			}
		}
	}
</script>

<style lang="less" scoped>
	.sidebar {
		display: block;
		position: absolute;
		width: 250px;
		left: 0;
		top: 70px;
		bottom: 0;
		background: #0B9595;
		.nav {
			height: 100%;
			color: #fff;
			font-size: 16px;
			background-color: transparent;
			&:after {
				width: 0;
			}
			.ivu-menu-item-active,
			.ivu-menu-opened,
			.ivu-menu-submenu :hover {
				background-color: #097e7e;
			}
			.ivu-menu-item.ivu-menu-item-selected {
				border-right: none;
				background-color: #086868;
			}
			.ivu-menu-item {
				font-size: 16px;
				color: #fff;
				&:hover {
					background-color: #086868;
				}
			}
		}
	}
</style>